<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>住宿登记</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules"  label-width="180px">
        <el-form-item label="预订人姓名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入预订人姓名" />
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号码" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="入住时间" prop="liveTime">
          <el-date-picker clearable
                          v-model="form.liveTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          @change="getDay"
                          placeholder="请选择入住时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离店时间" prop="leaveTime">
          <el-date-picker clearable
                          v-model="form.leaveTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          @change="getDay"
                          placeholder="请选择离店时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">获取空闲房间</el-button>
        </el-form-item>
        <el-form-item label="房间" prop="roomId">
          <el-select v-model="form.roomId" placeholder="请选择房间" >
            <el-option
              v-for="item in roomList"
              :key="item.id"
              :label="item.name"
              @click.native="getDay"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="居住天数" prop="dwellingDay">
          <el-input v-model="form.dwellingDay" placeholder="请输入居住天数" disabled/>
        </el-form-item>
        <el-form-item label="订单价格" prop="orderPrice">
          <el-input v-model="form.orderPrice" placeholder="请输入订单价格"  disabled/>
        </el-form-item>
      </el-form>
      <div style="justify-content: center;text-align: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
import {listFreeRoom, addRoomOrder, updateRoomOrder, listRoomOrder} from "@/api/system/roomOrder";

export default {
  name: "RoomOrderAdd",
  data() {
    const checkPhone = (rule, value, callback) => {
      const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
      if (!value) {
        return callback(new Error('请输入您的手机号'));
      }
      setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          callback();
        }
      }, 500);
    };
    const checkIdCard = (rule, value, callback) => {
      const reg = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (!value) {
        return callback(new Error('请输入您的身份证号码'));
      }
      setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的身份证号码'));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客房订单表格数据
      roomOrderList: [],
      roomList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        liveTime: null,
        leaveTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "预订人姓名不能为空", trigger: "blur" }
        ],
        idCard: [
          {required: true, validator: checkIdCard, trigger: 'blur'}
        ],
        phone: [
          {required: true, validator: checkPhone, trigger: 'blur'}
        ],
        liveTime: [
          { required: true, message: "入住时间不能为空", trigger: "blur" }
        ],
        leaveTime: [
          { required: true, message: "离店时间不能为空", trigger: "blur" }
        ],
        dwellingDay: [
          { required: true, message: "居住天数不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "订单状态不能为空", trigger: "change" }
        ],
        roomId: [
          { required: true, message: "房间id不能为空", trigger: "change" }
        ],
        orderPrice: [
          { required: true, message: "订单价格不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
  },
  methods: {
    /** 查询客房 */
    getList() {
      listFreeRoom(this.form.liveTime,this.form.leaveTime,null).then(response => {
        this.roomList = response.data;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userName: null,
        idCard: null,
        phone: null,
        liveTime: null,
        leaveTime: null,
        dwellingDay: null,
        status: null,
        roomId: null,
        orderPrice: null,
        createTime: null,
        createUser: null,
        updateTime: null,
        updateUser: null,
        isDeleted: null
      };
      this.resetForm("form");
    },
    getDay(){
      let leave = this.form.leaveTime;
      let live = this.form.liveTime;
      if (live!=null&&leave!=null){
        let leaveDay = new Date(leave);
        let liveDay = new Date(live);
        let differDay = Math.round((leaveDay-liveDay)/1000/60/60/24);
        this.form.dwellingDay = differDay;
        let arr = this.roomList.filter(item=>item.id == this.form.roomId);
        this.form.orderPrice = (differDay * new Number(arr[0].roomPrice)).toString();
        console.log(differDay,this.form)
        this.$forceUpdate()
      }
    },    /** 提交按钮 */
    submitForm() {
      this.getDay()
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRoomOrder(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.reset();
            });
          } else {
            addRoomOrder(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.reset();
            });
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.box-card {
  width: 800px;
  margin-left: 20%;
}
</style>
